
var KEYBOARD = {
	hasInit:false,
	posWidth:700,
	show:function(opt){
		if(!this.hasInit){
			this.initKeyBoard();
			this.hasInit = true;
		}
		if(opt.showListener && typeof(opt.showListener)=='function'){
			this.showListener = opt.showListener;
		}else{
			this.showListener = null;
		}
		if(opt.setValueListener && typeof(opt.setValueListener)=='function'){
			this.setValueListener = opt.setValueListener;
		}else{
			this.setValueListener = null;
		}
		if(opt.keyDoneListener && typeof(opt.keyDoneListener)=='function'){
			this.keyDoneListener = opt.keyDoneListener;
		}else{
			this.keyDoneListener = null;
		}
		this.relateId = opt.id;	
		var relateDivA = document.getElementById(this.relateId);  
		this.value = relateDivA.value;

		if(!this.value){this.value = '';}
		
		this.pos = this.value.length;
		$('#keyboardBox').show();
		$('#keyboardInlineBox').show();
		this.setValue();
		$('#key-a-26').focus();
	},
	chagneEmptyToNBSP:function(val){
		var con = '';
		var arr = val.split(' ');
		if(arr.length > 1){
			con = arr[0];
			for(var i = 1;i<arr.length;i++){
				con +='&nbsp;' + arr[i];
			}
		}else{
			con = val;
		}
		return con;
	},
	setValue:function(){
		var val = this.value;
		var disVal = val.substring(0,this.pos);
		this.keyboardInline.innerHTML = this.chagneEmptyToNBSP(disVal);
		var width = this.keyboardInline.offsetWidth;
		var left = 0;
		if(width > this.posWidth){
			left =this.posWidth - width;
			width = this.posWidth-2;
		}
		this.keyboardTextBox.style.left = left;
		$(this.keyBoardPosBox).css('left' , width);
		this.keyboardTextBox.innerHTML = this.chagneEmptyToNBSP(val);

	},
	delValue:function(){
		if(this.pos > 0){
			this.value = this.value.substring(0,this.pos- 1)+this.value.substring(this.pos);
			this.pos --;
		}
		this.setValue();
	},
	addValue:function(v){
		this.value = this.value.substring(0,this.pos)+v+this.value.substring(this.pos);
		this.pos+=v.length;
		this.setValue();
	},
	stringToPassword:function(str){return str;},
	initKeyBoard:function(){
		var keyboardPYBox = $('<div id="keyboardPYBox"></div>');
		$('body').append(keyboardPYBox);
		var html = '';
		html += '<div class="keyboardPYLeft" id="keyboardPYLeft">&nbsp;</div>';
		html += ' <div class="keyboardPYRight" id="keyboardPYRight">&nbsp;</div>';
		html += '<div class="keyboardPYPage">';
			html += '<div class="keyboardPYPageUp" id="keyboardPYPageUp">Page/Up</div>';
			html += '<div class="keyboardPYPageDown" id="keyboardPYPageDown">Page/Down</div>';
		html += '</div>';
		keyboardPYBox.html(html);
		
		var keyboardBox = $('<div id="keyboardBox"></div>');
		$('body').append(keyboardBox);
		var html = '';
		html += '<div class="keyboardTop">';
			html += '<div class="keyboardTextBox" id="keyboardTextBox">&nbsp;</div>';
			html += '<div class="keyBoardPosBox" id="keyBoardPosBox">&nbsp;</div>';
		html += '</div>';
		
		html += '<div class="keyboardCon">';
			html += '<div class="keyboardItem">';
				html += ' <div class="keyboardItemLeft"><div class="keyItem2"><a href="#"  tar="done" id="key-item-done">Done</a></div></div>';
				html += '<div class="keyboardItemRight">';
					html += '<div class="keyItem"><a href="#" tar="key" val="0">1</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="1">2</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="2">3</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="3">4</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="4">5</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="5">6</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="6">7</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="7">8</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="8">9</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="9">0</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="10" id="key-item-10">-</a></div>';
				html += ' </div>';
			html += ' </div>';
			
			html += '<div class="keyboardItem">';
				html += '<div class="keyboardItemLeft"><div class="keyItem2"><a href="#" tar="shift"  id="key-item-shift">Shift</a></div></div>';
				html += '<div class="keyboardItemRight">';
					html += '<div class="keyItem"><a href="#" tar="key" val="11">q</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="12">w</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="13">e</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="14">r</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="15">t</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="16">y</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="17">u</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="18">i</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="19">o</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="20">p</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="21" id="key-item-21">_</a></div>';
				html += ' </div>';
			html += ' </div>';
			
			html += '<div class="keyboardItem">';
				html += '<div class="keyboardItemLeft"><div class="keyItem2"><a href="#" tar="caps" id="key-item-caps">Caps</a></div></div>';
				html += ' <div class="keyboardItemRight">';
					html += '<div class="keyItem"><a href="#" tar="key" val="22">a</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="23">s</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="24">d</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="25">f</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="26" id="key-a-26">g</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="27">h</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="28">j</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="29">k</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="30">l</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="31">&</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="32" id="key-item-32">@</a></div>';
				html += ' </div>';
			html += ' </div>';
			
			html += '<div class="keyboardItem">';
				html += '<div class="keyboardItemLeft"><div class="keyItem2"><a href="#" tar="sym" id="key-item-sym">Sym</a></div></div>';
				html += '<div class="keyboardItemRight">';
					html += '<div class="keyItem"><a href="#" tar="key" val="33">z</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="34">x</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="35">c</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="36">v</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="37">b</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="38">n</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="39">m</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="40">.</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="41">:</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="42">/</a></div>';
					html += '<div class="keyItem"><a href="#" tar="key" val="43" id="key-item-43">://</a></div>';
				html += '</div>';
			html += ' </div>';
				
			html += '<div class="keyboardItem">';
				html += '<div class="keyboardItemLeft"><div class="keyItem2"><a href="#" tar="del"  id="key-item-del">Del</a></div></div>';
				html += '<div class="keyboardItemRight">';
					html += '<div class="keyItem5"><a href="#" tar="key" val="44">&nbsp;</a></div>';
					html += '<div class="keyIteml"><a href="#" tar="left">&nbsp;</a></div>';
					html += '<div class="keyItemr"><a href="#" tar="right" >&nbsp;</a></div>';
					html += '<div class="keyItemDel"><a href="#" tar="del">&nbsp;</a></div>      ';
					html += '<div class="keyItem2"><a href="#" tar="done" id="key-item-done2">Done</a></div>';
				html += '</div>';
			html += ' </div>';
		html += ' </div>';
		
		keyboardBox.html(html);
		
		var keyboardInlineBox = $('<div id="keyboardInlineBox">&nbsp;</div>');
		$('body').append(keyboardInlineBox);
		var html = '';
		html += ' <div class="keyboardInlineBox2">';
			html += '<div class="keyboardInline" id="keyboardInline"></div>';
		html += '</div>';
		keyboardInlineBox.html(html);
		
		var _this = this;
		$('#keyboardBox a').focus(function(event){
			var par = $(this).parent();
			var c = par.attr('class');
			par.removeClass(c).addClass(c+'_cur');
			KEY.CURTYPE = 'keyboard';
		}).blur(function(event){
			var par = $(this).parent();
			var c = par.attr('class');
			var l = c.lastIndexOf('_');
			var nc = c.substring(0,l); 
			par.removeClass(c).addClass(nc);
		}).click(function(event){
			
			var tar = $(this).attr('tar');
			var val = $(this).attr('val'); 
			if(tar == 'left' || tar=='right'){
				_this.posMove(tar);
			}else{
				_this.type.keyRecv(this,tar,val);
			}
			return false;
		});
		
		this.typeList = new Array();
		this.typeList.push({tar:'EN',obj:KEYBOARD_EN});
		this.typeList.push({tar:'Sym',obj:KEYBOARD_SYM});
		KEYBOARD.type = KEYBOARD_EN;
		this.curTypeId = 1;
		this.keyboardInlineBox = document.getElementById('keyboardInlineBox');
		this.keyboardInline = document.getElementById('keyboardInline');
		this.keyboardTextBox = document.getElementById('keyboardTextBox');
		this.keyBoardPosBox = document.getElementById('keyBoardPosBox');
		
		var w = $('body').width();
		if(w>1280){
			var left = (w - 1280)/2;
			keyboardPYBox.css('left',left);
			keyboardBox.css('left',left);
			keyboardInlineBox.css('left',left);
		}
		
		$('.keyboardItem',keyboardBox).each(function(i, element) {
            var row = i + 1;
			$('a',this).each(function(j, element) {
                var col = j+1;
				$(this).attr('pos',row+'-'+col);
            });
        });
	},
	posMove:function(tar){
		if(tar == 'left' ){
			if(this.pos > 0){
				this.pos--;
				this.setValue();
			}
		}else{
			if(this.pos < this.value.length){
				this.pos++;
				this.setValue();
			}
		}
	},
	refreshPage:function(list){
		var keyboardBox = document.getElementById('keyboardBox');
		var aList = keyboardBox.getElementsByTagName('a');
		var a;
		for(var i = 0;i<aList.length;i++){
			a = aList[i];
			var tar = a.getAttribute('tar');
			if(tar == 'key'){
				var val = parseInt(a.getAttribute('val'));
				if(list[val] == ' '){
					a.innerHTML = '&nbsp;';
				}else{
					a.innerHTML = list[val];
				}
			}
		}
	},
	changeKeyType:function(){
		this.curTypeId ++;
		if(this.curTypeId>this.typeList.length){
			this.curTypeId = 1;
		}
		KEYBOARD.type = this.typeList[this.curTypeId - 1].obj;
		KEYBOARD.type.refreshPage();
		var a = document.getElementById('key-item-sym');
		a.innerHTML2 = this.typeList[this.curTypeId - 1].tar;
	},
	keyNumRecv:function(key){
		if(this.type.keyNumRecv){$.log("key:"+key);
			this.type.keyNumRecv(key);
		}
	},
	keyDone:function(){
		KEY.CURTYPE = '';
		if(this.keyDoneListener){
			this.keyDoneListener(this.value);
		}else{
			$('#'+this.relateId).focus();
		}
		var a = document.getElementById(this.relateId);
		
		
		//a.innerHTML = this.value;
		//a.setAttribute('value',this.value);
		$(a).val(this.value);
		
		this.keyboardInlineBox.style.display = 'none';
		var keyboardBox = document.getElementById('keyboardBox');
		keyboardBox.style.display = 'none';
		
		var keyboardPYBox = document.getElementById('keyboardPYBox');
		keyboardPYBox.style.display = 'none';
	},
}


var KEYBOARD_EN = {
	list:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'q','w','e','r','t','y','u','i','o','p','_',
		'a','s','d','f','g','h','j','k','l','&','@',
		'z','x','c','v','b','n','m','.',':','/','://',
		' '
	],
	shiftList:false,
	capsList:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'Q','W','E','R','T','Y','U','I','O','P','_',
		'A','S','D','F','G','H','J','K','L','&','@',
		'Z','X','C','V','B','N','M','.',':','/','://',
		' '
	],
	capsShow:false,
	keyRecv:function(a,tar,val){
		if(tar=="done"){
			KEYBOARD.keyDone();
		}else if(tar =="shift"){
			if(this.capsShow){
				this.capsShow = false;
				KEYBOARD.refreshPage(this.list);
			}else{
				this.capsShow = true;
				KEYBOARD.refreshPage(this.capsList);
				
			}
		}else if(tar=="caps"){
			if(this.capsShow){
				this.capsShow = false;
				KEYBOARD.refreshPage(this.list);
			}else{
				this.capsShow = true;
				KEYBOARD.refreshPage(this.capsList);
				
			}
		}else if(tar == 'sym'){
			KEYBOARD.changeKeyType();
		}else if(tar == 'del'){
			KEYBOARD.delValue();
		}else if(tar=='key'){
			var v = parseInt(val);
			if(this.capsShow){
				var w = this.capsList[v];
				KEYBOARD.addValue(w);
			}else{
				var w = this.list[v];
				KEYBOARD.addValue(w);
			}
		}
	},
	refreshPage:function(){
		if(this.capsShow){
			KEYBOARD.refreshPage(this.capsList);
		}else{
			KEYBOARD.refreshPage(this.list);
		}
	}
};
var KEYBOARD_SYM = {
	list:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'[','\\','{','#','}','|',':','(',';','"','_',
		')','$','!','$',']','%','&',',','@','/','@',
		'^','+','*','?','&','|','.','://',':','-','://',
		' '
	],
	shiftList:false,
	capsList:false,
	refreshPage:function(){
		KEYBOARD.refreshPage(this.list);
	},
	keyRecv:function(a,tar,val){
		if(tar=="done"){
			KEYBOARD.keyDone();
		}else if(tar == 'sym'){
			KEYBOARD.changeKeyType();
		}else if(tar == 'del'){
			KEYBOARD.delValue();
		}else if(tar=='key'){
			var v = parseInt(val);
			var w = this.list[v];
			KEYBOARD.addValue(w);
		}
	},
};	


KEYBOARD.keyRecv=function(key,keyName,a){
	var pos = $(a).attr('pos');
	var posArray = pos.split('-');
	var row = parseInt(posArray[0]);
	var col = parseInt(posArray[1]);
	if(keyName == 'KEY_LEFT'){		//向左
		col --;
		var par = $(a).parent().parent().parent();
		if(col>0){
			$('a:eq('+(col-1)+')',par).focus();
		}else{
			col = $('a',par).length;
			$('a:eq('+(col-1)+')',par).focus();
		}
		return ;
	}else if(keyName == 'KEY_RIGHT'){		//向右
		col ++;
		var par = $(a).parent().parent().parent();
		var maxLength = $('a',par).length;
		if(col<=maxLength){
			$('a:eq('+(col-1)+')',par).focus();
		}else{
			col = 1;
			$('a:eq('+(col-1)+')',par).focus();
		}
		return ;
	}else if(keyName == 'KEY_DOWN'){
		if(row == 5) return ;
		var par = $(a).parent().parent().parent();
		var nextItem = par.next();
		if(row == 4){
			var tc = 1;
			if(col == 1){tc = 1;}
			else if(col <7){
				tc = 2;
			}else if(col == 7){
				tc = 3;
			}else if(col == 8){
				tc = 4;
			}else if(col <11){
				tc = 5;
			}else{
				tc = 6;
			}
			$('a:eq('+(tc-1)+')',nextItem).focus();
		}else{
			$('a:eq('+(col-1)+')',nextItem).focus();
		}
	}else if(keyName =='KEY_UP'){
		if(row == 1) return ;
		var par = $(a).parent().parent().parent();
		var prevItem = par.prev();
		if(row == 5){
			var tc = 1;
			if(col == 1){tc = 1;}
			else if(col ==2){
				tc = 2;
			}else if(col == 3){
				tc = 7;
			}else if(col == 4){
				tc = 8;
			}else if(col ==5){
				tc = 9;
			}else{
				tc = 11;
			}
			$('a:eq('+(tc-1)+')',prevItem).focus();
		}else{
			$('a:eq('+(col-1)+')',prevItem).focus();
		}
	}else if(keyName == 'KEY_RETURN'){
		KEYBOARD.keyDone();
	}
}
KEY.TYPE['keyboard'] = KEYBOARD.keyRecv;